<template>
	<!-- 顶部标题和产品类按钮 -->
	<div class="theTop">
		<div class="top-buttons">
			<div class="button" :class="curCategoryId == 1 ? 'activate' : ''" @click="onClickButton(1)">香榧</div>
			<div class="button" :class="curCategoryId == 2 ? 'activate' : ''" @click="onClickButton(2)">笋竹</div>
			<div class="button" :class="curCategoryId == 3 ? 'activate' : ''" @click="onClickButton(3)">山黄精</div>
		</div>
		<div class="title">当前年份：{{ this.year }}</div>
	</div>
</template>

<script>
export default {
	name: 'CenterCategoryMapTop',
	data() {
		return {
			timer: null, //定时器
		};
	},
	props: {
		year: {
			type: Number,
			default: 2023
		},
		switchTime:{
			type: Number,
			default: null, //产品分类按钮切换时间（毫秒）<暂时写死？？？？？？？>
		}
	},
	computed: {
	  curCategoryId(){
	  	return this.$store.getters.curCategoryId; //
	  },
	},
	created() {
		if (this.switchTime) {
			this.timer = setInterval(() => {
				let categoryId = this.curCategoryId + 1;
				categoryId = categoryId > 3 ? 1 : categoryId;
				this.onClickButton(categoryId);
			}, this.switchTime);
		}
	},
	beforeDestroy() {
		if (this.timer) {
			clearInterval(this.timer);
		}
	},
	methods: {
		onClickButton(categoryId) {
			this.$emit('onChanged', categoryId);
		}
	}
};
</script>
<style lang="scss" scoped>
.theTop {
	width: 90%;
	height: 128px;
	// padding: 10px 50px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;

	.title {
		height: 36px;
		font-size: 30px;
		font-weight: 500;
		line-height: 36px;
		color: #e0e0e0;
	}
	.top-buttons {
		padding: 10px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		gap: 60px;
		.button {
			cursor: pointer;
			width: 174px;
			height: 64px;
			background-image: url('~@/assets/img/button.png');
			font-size: 30px;
			line-height: 64px;
			color: #849093;
			text-align: center;
		}
		.activate {
			color: #ffffff;
			// font-weight: bold;
			background-image: url('~@/assets/img/button_active.png');
		}
	}
}
</style>
